<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <!-- js导入 -->
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
   <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>
  <!-- css 导入 -->
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
    <script type="text/javascript">
       $(function(){
    	    //  加载 datagrid 数据    
    	   $('#dg').datagrid({ 

    		   url:'emp.json', 

    		   columns:[[ 

    		   {field:'empno',title:'empno',width:100}, 

    		   {field:'ename',title:'ename',width:100}, 

    		   {field:'job',title:'job',width:100,align:'right'} 

    		   ]] ,
    		   toolbar: [{  		
    			   iconCls: 'icon-edit',  		
    			   handler: function(){alert('edit')}  	
    			   },'-',{  		
    			   iconCls: 'icon-help',  		
    			   handler: function(){alert('help')}  	
    			   }] , 
    			   pagination:true,
    			   pageList:[1,2,3]
    		   }); 

       });
    </script>
  
</head>
<body>
	<table class="easyui-datagrid" style="width: 400px; height: 250px"
		data-options="url:'emp.json',fitColumns:true,singleSelect:true,pagination:'true',pageList:[1,2,3]">
		<thead>
			<tr>
				<th data-options="field:'empno',width:100,checkbox:'true'">员工编号</th>

				<th data-options="field:'ename',width:100">员工姓名</th>

				<th data-options="field:'job',width:100,align:'right'">员工职位</th>
			</tr>
		</thead>

	</table>

<hr>  
<h2>纯js 完成数据表格</h2>
<table id="dg"></table>


</body>
</html>